<template>
  <div>
    <div class="search-bar">
      <el-input
          class="custom-input"
          placeholder="请输入学生姓名"
          v-model="searchText"
          clearable>
      </el-input>
      <h3>总人数为：{{info.studentUser.length}}</h3>
    </div>
    <div class="table-container">
      <table class="student-table">
      <thead>
      <tr class="sticky-header">
        <th>Open ID</th>
        <th>Name</th>
        <th>Avatar</th>
        <th>Student Number</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="student in filPersons" :key="student.id">
        <td>{{ student.openid }}</td>
        <td>{{ student.name }}</td>
        <td>
          <img class="headimgurl" :src="student.headimgurl" alt="Avatar" />
        </td>
        <td>{{ student.studentnum }}</td>
        <td><el-button
            type="danger"
            icon="el-icon-delete"
            circle
            class="delete-button"
            @click="delectUser(student.id)"></el-button></td>
      </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      info:{
        studentUser:[]
      },
      searchText: ''
    };
  },
  methods: {
    delectUser(id){
      if (confirm('确认删除吗？')){
        console.log('删除deid为',id)
        axios.post(`/api/delect/student/${id}`)
            .then(res =>{
              console.log(res.data)
              if (res.data.code === 0){
                alert('删除成功！')
              } else {
                alert('删除失败！')
              }
            })
            .catch(error =>{
              console.log(error)
              alert(error)
            })
      }
    }

  },
  mounted() {
    axios.post('/api/student')
        .then(res => {
          // console.log(res.data.result);
          let studentUser = res.data.result
          this.info.studentUser = studentUser
        })
        .catch(error => {
          console.error(error);
        });
  },
  computed:{
    filPersons() {
      return this.info.studentUser.filter((p) => {
        return p.name.indexOf(this.searchText) !== -1
      })
    }
  },
};
</script>

<style>
.custom-input {
  width: 100%; /* 输入框宽度自适应父容器宽度 */
  max-width: 500px; /* 设置输入框的最大宽度为 500 像素 */
}
.search-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.table-container {
  height: 550px; /* 设置表格容器的高度，根据实际情况调整 */
  overflow-y: scroll;
}
.sticky-header {
  position: sticky;
  top: 0;
  background-color: white;
}
.student-table {
  width: 100%;
  border-collapse: collapse;
}
.student-table tr:hover .delete-button {
  visibility: visible;
}
.delete-button {
  visibility: hidden;
}

.student-table th,
.student-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.student-table th {
  background-color: #f5f5f5;
}
.headimgurl{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>